<!DOCTYPE html>

<html lang="en">
  <head>
  	<title>选项卡插件</title>
    <meta charset="utf-8">
</head>
<body>
<script language="javascript" src="js/jquery-1.11.1.js"></script>
<script language="javascript" src="js/jquery.easydrag.handler.beta2.js"></script>

<style type="text/css">
body{font-size: 12px;color: #aaa;}
.tabBox{width: 500px;}
.tabBox ul{margin:0;padding: 0;height:30px;border-bottom: 1px solid #ccc;}
.tabBox ul li{float: left;width: auto;height:30px;line-height: 30px;list-style-type: none;font-size: 13px;font-weight: bold;text-align: center;cursor: pointer;border-left: 1px solid #ccc;border-right: 1px solid #ccc;border-top: 1px solid #ccc;margin-right: 5px;padding: 0px 15px;}
.tabBox ul li.selected{background-color: #eb6100;color: #fff;border:none;}
.tabBox .content{width: auto;border: 1px solid #ccc;}
.tabBox .content .ct{padding: 10px;display: none;}
.tabBox .content .show{display: block;}
</style>
<script type="text/javascript">
	
	$(document).ready(function() {
		// $(".content .ct").hide();
		$(".content .ct").eq(0).addClass('show');
		$("ul li").eq(0).addClass('selected');

		$("ul > li").click(function() {

			$("ul").find('li').removeClass('selected');
			$(this).addClass('selected');

			var tabIndex = $("ul > li").index(this);
			console.log("tabIndex: "+tabIndex);
			$(".content").find(".ct").removeClass('show')
			$(".content .ct").eq(tabIndex).addClass('show');
		});
	});
</script>

<div class="tabBox">
	<ul>
		<li>菜单1</li>
		<li>菜单2</li>
		<li>菜单3</li>
	</ul>
	<div class="content">
		<div class="ct">内容1</div>
		<div class="ct">内容2</div>
		<div class="ct">内容3</div>
	</div>
</div>


</body>
</html>